﻿<div ng-if="ciCtrl.eventIndicator" id="eventIndicatorView">
    <div ng-if="ciCtrl.eventIndicator.answerCategory == 0" style="padding-top: 15px;">
        No evidence of relevant controversies
    </div>
    <div ng-if="ciCtrl.eventIndicator.answerCategory > 0">        
        <div>
            <div style="float: left; width: 40%;">
                <div style="float: left; width: 200px;">
                    <div class="sidebar-table-left no-border" style="width: 80px;">
                        <div class="orange-number-bubble border{{ ciCtrl.eventIndicator.answerCategory }} ng-binding">
                            {{ ciCtrl.eventIndicator.answerCategory }}
                        </div>
                    </div>
                    <div class="sidebar-table-right no-border" style="width: 120px;">
                        <div class="title-black-border no-border" style="padding-top: 15px;">Category {{ ciCtrl.eventIndicator.answerCategory }} -<br />{{ ciCtrl.eventIndicator.eventSeverity }}</div>
                        <div class="table-3" style="margin-top: 9px;">
                            <div class="table-row-3" ng-repeat="ei in ind.eventIndicators">
                                <div class="table-cell-3 width_130_2 no-border" style="font-weight: normal;">{{ ciCtrl.eventIndicator.name }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div style="width: 205px; float: left;">
                    <div ng-if="ciCtrl.eventIndicator.answerCategory > 2">
                        <div class="sidebar-table-left no-border" style="width: 90px;">
                            <div class="trend-arow-large trend-arow-{{ ciCtrl.eventIndicator.outlookScore }}">&nbsp;</div>
                        </div>
                        <div class="sidebar-table-right no-border" style="width: 115px;">
                            <div class="title-black-border no-border" style="padding-bottom: 0; padding-top: 15px;">
                                Outlook
                            </div>
                            <ul class="esg-ratings_black" style="padding-top: 0;">
                                <li>{{ ciCtrl.eventIndicator.outlookAssessment }}</li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clear"></div>
                <div>
                    <div style="float: left; margin-right: 5px;"><b>Locations:</b></div>
                    <div id="addressDetails">
                        <!--{{ciCtrl.addressDetails}} e facut cu jquery-->
                    </div>
                </div>
                <div id="tags" class="tags-controversies">
                   <b>Tags:</b> {{ciCtrl.allTags}}
                </div>
            </div>
            <div style="float: left; width: 60%;">
                <div ng-include="'/Views/Research/Controversies/Common/IncidentsEventIndicatorWorldMap.html'"></div>
            </div>
            <div class="clear"></div>            
        </div><br />
        <div ng-if="ciCtrl.eventIndicator.answerCategory > 2">  
            <div>
                <div style="font-weight: bold; margin-top: 15px;">{{ ciCtrl.eventIndicator.outlookText }}</div>
                <ul ng-repeat="comment in ciCtrl.eventIndicator.outlookComments track by $index">
                    <li>{{ comment }}</li>
                </ul>
                <div class="title-18-bold" style="margin-bottom: 5px;">Assessment</div>
                <div>{{ ciCtrl.eventIndicator.controversySummary }}</div>
                <div>{{ ciCtrl.eventIndicator.answerCategoryJustification }}</div>
            </div>

        </div>

        <div ng-if="ciCtrl.eventIndicator.answerCategory > 3">

            <div>{{ ciCtrl.eventIndicator.impactText }}</div>
            <ul ng-repeat="comment in ciCtrl.eventIndicator.impactComments track by $index">
                <li>{{ comment }}</li>
            </ul>

            <div>{{ ciCtrl.eventIndicator.riskText }}</div>
            <ul ng-repeat="comment in ciCtrl.eventIndicator.riskComments track by $index">
                <li>{{ comment }}</li>
            </ul>

            <div>{{ ciCtrl.eventIndicator.preparednessText }}</div>
            <ul ng-repeat="comment in ciCtrl.eventIndicator.preparednessComments track by $index">
                <li>{{ comment }}</li>
            </ul>

        </div>

        <!--<div class="title-18-bold"> {{ ciCtrl.eventIndicator.name }} Incidents</div>
        <div class="border-spacer"></div>-->

        <!--<div>Incidents Timeline</div>-->

        <div ng-if="ciCtrl.allIncidents && ciCtrl.eventIndicator.answerCategory > 2">
            <div style="float: left; width: 224px; margin-top: 62px;">
                <div class="legend-scatered">
                    <div class="legend-scatered-left">Highest of Impact or Risk</div>
                    <div class="legend-scatered-right risk"></div>
                    <div class="clear"></div>
                </div>
                <div class="legend-scatered">
                    <div class="legend-scatered-left">Main Incident</div>
                    <div class="legend-scatered-right main"></div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div style="float: left; width: 800px;">
                <scatter-chart id="chartId" incidents="ciCtrl.incidentGraph" select="ciCtrl.selectIncident(incident)"></scatter-chart>
            </div>
            
        </div>

        <div ng-include="'/Views/Research/Controversies/Common/Incidents.html'"></div>

        </div>
</div>
